<template>
  <view>
    <view class=''>
      <view class="cu-list menu-avatar bg-green" style="background-color: #39b54a;">
        <view class="cu-item bg-green" style="background-color: #39b54a;">
          <view class="cu-avatar round lg" :style="'background-image:url('+avatarUrl+');'"></view>
          <view class="content">
            <view class="text-white" v-if="userName!=''" >{{userName}}</view>
            <view class="text-white text-sm flex">
              <view v-if="userId!=undefined" class="text-cut">
                用户编码：{{userId}}
              </view>
              <view v-if="!userId" class="text-cut text-white text-bold" open-type="getUserInfo" lang="zh_CN" @tap="getUserInfo">请先登录</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="cu-list menu sm-border card-menu padding-top">
      <view class="cu-item arrow" @tap="homeList">
        <view class="content">
          <text class="cuIcon-list text-lg"/>
          <text class="text-left">切换卡片</text>
        </view>
      </view>
      <view class="cu-item arrow" @tap="addHome">
        <view class="content">
          <text class="cuIcon-list text-lg"/>
          <text class="text-left">绑定卡片</text>
        </view>
      </view>

      <view class="cu-item arrow" @tap="redirectUser">
        <view class="content">
          <text class="cuIcon-list text-lg"/>
          <text class="text-left">个人信息</text>
        </view>
      </view>
      <view class="cu-item">
        <view class="content">
          <text class="cuIcon-apps text-lg"/>
          <text class="text-left">当前版本</text>
        </view>
        <view class="action">
          <text>V{{version}}</text>
        </view>
      </view>

      <view class="cu-item arrow" @tap="aboutUs">
        <view class="content">
          <text class="cuIcon-info text-lg"/>
          <text class="text-left">关于我们</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref, onMounted, computed } from 'vue';
import {useStore} from "../../common/store";
import { getUser, getWeixinOpenid, saveUser} from "../../common/api/user";
const store = useStore();

const hasLogin = computed(() => store.hasLogin)
const token = computed(() => store.token)
const userId = computed(() => store.userId)
const userName = computed(() => store.userName)
const avatarUrl = computed(() => store.avatarUrl)
const phone = computed(() => store.phone)
const version = ref('2.2')


const mpGetUserInfo = (result) => {
  console.log('mpGetUserInfo', result);
}

const getUserInfo = () => {
  if (!token.value) {
    setTimeout(() => {
      // uni.authorize({
      //   scope: 'scope.userInfo',
      //   success() {
      uni.login({
        provider: 'weixin',
        // "onlyAuthorize": true, // 微信登录仅请求授权认证
        success: function (loginRes) {
          getWeixinOpenid(loginRes).then(res => {
            console.log(res)
            let openID = res.openid;
            token.value = openID
            uni.getUserInfo({
              success: (resInfo) => {
                console.log(resInfo)
                let userInfo = resInfo.userInfo;
                saveUser({
                  avatarUrl: userInfo.avatarUrl,
                  gender: userInfo.gender,
                  nickName:userInfo.nickName,
                  openId: openID
                }).then(res => {
                  getUserStore(openID)
                })
              }
            });
          });
        }
      })
      // }
      // })
    }, 1000);
  }
}

const getUserStore = async (openid) => {
  await getUser(openid).then(res => {
    store.$patch({avatarUrl: res.avatarUrl,userId: res.id, userName: res.nickName, hasLogin: true, phone: res.phone, token: openid
    })
  })
}

onMounted(async () => {
  if (token.value) {
    await getUserStore(token.value)
  }
})

</script>

<style scoped>
.ucenter-bg {
  /*background-color: #66ccff;*/
  height: 250rpx;
  display: flex;
  justify-content: center;
  padding-top: 40rpx;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-weight: 300;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.ucenter-bg text {
  opacity: 0.8;
}

.ucenter-bg image {
  width: 200rpx;
  height: 200rpx;
}

</style>
